<template>
	<view class="main">
		<view class="content">
			<TitleBarVue :title="title"/>
			<view class="txt">性格类型</view>
			<view class="INTJ">
				<view class="top">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-list-cell-left">
										{{text}}
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="icon" @change="bindPickerChange">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20516.png" mode=""></image>
					</view>
				</view>
				<!-- <view class="bottom">富有想象力和战略性思维,一切皆在计划中</view> -->
			</view>
		</view>
		<view class="test_bottom">
			<view class="test" @click="gotoTestPage">
				<view class="txt">不清楚测试,去测试</view>
				<view class="arr_icon">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png" mode=""></image>
				</view>
			</view>
			<view class="tips">温馨提示：测试完后请记住或截图结果回来填</view>
			<view class="btn" @click="confirm">确定</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { DictionaryApi } from '../../http/dictionary';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				text:'请选择性格',
				array: [],
				id:0,
				index: 0,
				title: 'MBTI性格'
			};
		},
		components: {TitleBarVue},
		onShow() {
			
			this.QueryPersonality()
		},
		onLoad() {
			
			if(this.$store.state.user.personalityType){
				this.text=this.$store.state.user.personalityType
				
			}else{
				this.text='请选择性格'
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.text = this.array[this.index]
			},
			async editUserInfo( val,val2) {
				let Info = {
					personalityType: val,
					personalityTypeId: val2
				}
				let res = await userApi.editUserInfo(Info)
			},
			confirm() {
				if(this.text!='请选择性格'){
					
				
				this.array.forEach(i=>{
					if(i.personalityType==this.text){
					this.id=i.id
					}
				})
				
				
					this.editUserInfo(this.text,this.id);	
				uni.switchTab({
					url: '/pages/user/user'
				})
				}
			},
			gotoTestPage() {
				uni.navigateTo({
					url: '/pagesMain/my-grade/my-grade'
				})
			},
			async QueryPersonality() {
				let params = {
					dictId: 13,
					pageIndex: 1,
					pageSize: 30,
				}
				const res = await DictionaryApi.Dictionary(params)
				res.records.forEach((i, dex) => {
					this.array.push(i.dictValue)
					
				})
			}
		}
	}
</script>

<style lang="scss">
.main {
	overflow: hidden;
	background-image: none;
	background-color: #fff;
	position: relative;
	.content {
		position: relative;
		width: 750rpx;
		.title {
			display: flex;
			align-items: center;
			font-weight: 700;
			height: 80rpx;
			.goback {
				image {
					margin-left: 50rpx;
					width: 20rpx;
					height: 30rpx;
				}
			}
			text {
				flex: 1;
				margin-right: 50rpx;
				font-size: 34rpx;
				text-align: center;
			}
		}
		.txt {
			margin: 40rpx 0 0 50rpx;
			font-size: 32rpx;
			color: #231815;
		}
		.INTJ {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.top {
				display: flex;
				font-size: 50rpx;
				font-weight: 700;
				margin: 100rpx 0 20rpx;
				.icon {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					margin-left: 20rpx;
					image {
						width: 35.87rpx;
						height: 34.45rpx;
					}
				}
			}
			.bottom {
				color: #595757;
			}
		}
	}
	.test_bottom {
		position: absolute;
		bottom: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.test {
			display: flex;
			justify-content: center;
			.txt {
				color: #231815;
				font-weight: 700;
				font-size: 30rpx;
				margin-right: 40rpx;
			}
			.arr_icon {
				display: flex;
				align-items: center;
				image {
					transform: rotate(180deg);
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		.tips {
			color: #595757;
			font-size: 26rpx;
			text-align: center;
			margin: 12rpx 0 40rpx;
		}
		.btn {
			width: 635rpx;
			height: 81rpx;
			line-height: 81rpx;
			border-radius: 40rpx;
			font-size: 34rpx;
			color: #fff;
			text-align: center;
			background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
		}
	}
}
</style>
